import React, { Component } from 'react'
import { Select } from 'antd'
import { getChannels } from 'api/channel'

export default class Channel extends Component {
  render() {
    // antd 表单处理自定义或第三方的表单控件，Form 组件会自动传递 value 属性和 onChange 事件
    // antd 自定义表单控件官方文档：https://ant.design/components/form-cn/#components-form-demo-customized-form-controls
    // console.log('Form 组件传过来的属性', this.props)
    return (
      <Select style={{ width: 200 }} placeholder='请选择文章频道' value={this.props.value} onChange={this.props.onChange}>
        {this.state.channels.map((item) => (
          <Select.Option key={item.id} value={item.id}>
            {item.name}
          </Select.Option>
        ))}
      </Select>
    )
  }

  state = {
    // 频道列表数据
    channels: [],
  }

  async getChannelList() {
    const res = await getChannels()
    // 考虑前添加数据的情况
    const channels = this.props.beforeAdd ? [this.props.beforeAdd, ...res.data.channels] : res.data.channels
    // console.log('频道数据', channels)
    this.setState({
      channels: channels,
    })
  }

  componentDidMount() {
    this.getChannelList()
  }
}
